<template>
    <div class="oss-upload">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="iconfont icon-wenzhangliebiaoxiangqing"></i> OSS</el-breadcrumb-item>
                <el-breadcrumb-item>OSS图片上传</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-upload
                    class="avatar-uploader"
                    action="oss_upload"
                    :headers="header"
                    :on-preview="handlePreview"
                    :on-success="handleAvatarSuccess"
                    :before-remove="beforeRemove"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <div style="margin-top: 20px;">
                <el-upload
                        list-type="picture-card"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>


        </div>

    </div>
</template>

<script>
    export default {
        name: "OSSUpload",
        data() {
            return {
                dialogVisible:false,
                dialogImageUrl:'',
                imageUrlT:'',
                imageUrl: '',
                header:{
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
            };
        },
        methods: {
            test(){
                this.getAjax('admin/cancel_img',{img_name:'11'}).then(res=>{
                    console.log(res);
                });
            },
            handlePreview(file){

            },
            handleAvatarSuccess(res, file,fileList) {
                if(fileList.length>=2){
                    fileList.shift();
                }
                console.log(res.code);
                if(res.code){
                    this.imageUrlT = res.data;
                }
                if(res.code == -1){
                    this.$router.push('/login')
                }

                this.imageUrl = URL.createObjectURL(file.raw);
            },
            handleRemove(file, fileList){

            },
            beforeRemove(file, fileList){
                this.getAjax('admin/cancel_img',{img_name:file.response.relative_url}).then(res=>{
                    if(res.code){
                        this.imageUrl = '';
                        this.$message.success(res.msg);
                    }
                });
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('只能上传JPG和PNG格式的图片');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>